<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 这个数据的本质是存储在当前页面内存的 -->
    <input type="text" id="userName">
    <input type="button" value="设置数据" id="setData">
    <input type="button" value="获取数据" id="getData">
    <input type="button" value="删除数据" id="removeData">
    <script>
        // 存储数据
        document.querySelector("#setData").onclick = function() {
                var name = document.querySelector("#userName").value;
                window.sessionStorage.setItem("userName", name)
            }
            // 获取数据
        document.querySelector("#getData").onclick = function() {

                var name = window.sessionStorage.getItem("userName");
                alert(name);
            }
            // 删除数据
        document.querySelector("#removeData").onclick = function() {
            // 再删除数据的时候如果key值错误，不会报错，但是也不会删除数据
            window.sessionStorage.removeItem("userName");
        }
    </script>

</body>

</html>